<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM查询</title>
</head>
<body>
    <button>一</button>
    <button name="gender">二</button>
    <button id="btn">三</button>
    <div>
    <input class="class1" type="radio" name="gender1" value="man">男
    <input class="class2" type="radio" name="gender1" value="wman" checked>女
    </div>

</body>
</html>
<script>
    /*
        getElementsByTagName()可以根据标签名来获取一组元素节点对象
        这个方法会给我们返回一个类数组对象，所有查询到的元素都会封装到对象中
        即使查询到的元素只有一个，也会封装到数组中返回
    */
    /*
        innerHTML用于获取元素内部的HTML代码的 ⭐
            对于自结束标签，这个属性没有意义 input
    */

    // getElementsByTagName() ⭐标签名⭐
    var btn = document.getElementsByTagName("button");
    // alert(btn.length);
    for(var i=0;i<btn.length;i++){
        btn[i].onclick=function(){
            alert("哈喽,i’m TagName ！！");
        };
    }

    // getElementsByName()⭐name属性值⭐
    var btn2 = document.getElementsByName("gender");
    btn2[0].onclick=function(){
        alert("我是ByName");
    }

    // getElementById()⭐id属性值⭐
    var btn3 = document.getElementById("btn");
    btn3.onclick=function(){
        var inputs = document.getElementsByName("gender1");
        for(var i=0; i<inputs.length;i++){
            /*
                如果需要读取元素节点属性，
                    直接使用元素.属性名
                        例子：  元素.id  元素.name 元素.value
                        注意：class属性不能采用这种方式
                                读取class属性时需要使用 元素.className
            */
            alert("哈喽,i’m ById；  input的class属性值为："+inputs[i].className);
        }
    }

</script> 